<template>
	<view class="chat-box">
		<!-- 聊天内容窗体 -->
		<!-- <view class="messagelist">
			<block v-for="(msgItem,index) in messageList" :key="index" >
				<msglist :msgindex="index" :message="msgItem" 
				:chatevel="true"></msglist>
			</block>
		</view> -->
		<scroll-view class="messagelist dialogchat solid-top"  scroll-y="true"
		  :scroll-into-view="intoviewid">
		  <view class="cu-chat" >
		    <!-- <u-loadmore :status="status" v-if="chatforback > 0" /> -->
		    <block v-for="(msgItem,index) in messageList" :key="index">
		      <view :id="'message'+ msgItem.id ">
		        <!-- <view class="date-time padding-top-xs" v-if="index == 0">
		          <text class="text-gray "
		            v-if="index == 0">{{ $u.timeFrom(msgItem.timestamp, 'yyyy年mm月dd日 hh:MM:ss')}}</text>
		        </view>
		        <view class="date-time" v-if="index > 0 && msgItem.timestamp - messageList[index-1].timestamp > 12000">
		          <text class="text-gray">{{ $u.timeFrom(msgItem.timestamp, 'yyyy年mm月dd日 hh:MM:ss')}}</text>
		        </view> -->
		        <msglist :msgindex="index" :chatevel="true" 
					 :isManager="false" 
		          dialogtype="normal"  :message="msgItem">
		        </msglist>
		      </view>
		    </block>
		  </view>
		</scroll-view>
		
		
		
		<!-- 输入框 -->
		<view class="edit-box">
			<editor id="chathigheditor" @ready="onEditorReady" cursor-spacing="10" maxlength="-1"
			  :adjust-position="true" class="ql-container chateditor" :auto-height="true"
			  @input="InputInput"
			  :hold-keyboard="true"></editor>
			  <view class="action" @tap.prevent="sendMessage()">
			    <button class="cu-btn radius" :class="'bg-'+theme.actcolor">发送</button>
			  </view>
		</view>
	</view>
</template>

<script>
import msglist from "./msglist"
import core from "@/core"
export default {
	components: {
		msglist
	},
	data(){
		return{
			theme: core.style,
			higheditor: {
			  status: false, // 编辑器有没有准备好
			  faceTyping: false, // 表情输入中
			  adjustPos: true,
			  textTyping: false // 文字输入中
			},
			editorCtx: null,
			postdata:{},
			intoviewid:'',
		}
	},
	props:{
		messageList: {
			type: Array,
			default: function() {
				return [];
			}
		},
	},
	methods:{
		// 输入框
		onEditorReady() {
		  uni.createSelectorQuery()
		    .select('#chathigheditor')
		    .context(res => {
		      this.editorCtx = res.context;
		      this.higheditor.status = true
		    })
		    .exec();
		},
		InputBule(autofocus) {
		  if (this.higheditor.textTyping = !1,
		    !this.higheditor.status)
		  this.chatfocus = autofocus
		},
		InputInput(e) {
		  return this.InitEditor()
		},
		sendMessage(){
			this.$emit('sendMessage',this.postdata.message);
		},
		clearEditor(){
			"" != this.postdata.message && this.editorCtx.clear();
		},
		InitEditor: function() {
		  this.editorCtx.getContents({
		    success: (a) => {
		      var e = a.html.replace("<p><br></p>", "");
		      e = e.replace('</p><p><span class="ql-cursor">\ufeff</span></p>', "</p>").replace(
		          '<br>', '')
		        .replace(
		          /<\/?p[^>]*>/gi, '');
		      this.postdata.message = e
		      this.postdata.content = e
		    }
		  })
		},
		// 滚到底部
		scrollBottom(){
			if(this.messageList.length<=0) return;
			
			let lastId = this.messageList[this.messageList.length-1];
			this.$nextTick(()=>{
				setTimeout(()=>{
					this.intoviewid = 'message'+lastId.id
				},50)
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.chat-box{
	height: 1200rpx;
	padding-top: 80rpx;
	display: flex;
	flex-direction: column;
	.messagelist{
		flex: auto;
		overflow-y: auto;
		margin: 0 20upx;
		
	}
	.edit-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20upx 16upx;
	}
}
.chateditor {
  height: auto;
  max-height: 230upx;
  min-height: 64upx;
  // margin: 10upx 0;
  padding: 2upx 14upx;
  display: flex;
  background-color: #f4f5f9;
  // margin-left: 16upx;
  border-radius: 10upx;
  line-height: 64upx;
  font-size: 30upx;
}

.chateditor~.action .cu-btn {
  min-width: 3.5em;
  padding: 0 14upx;
}

.action{
	margin-left: 10upx;
}

</style>